<template>
  <div class="dashboard-editor-container">
    <el-card>
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                size="mini"
                style="width:100%;"
                v-model="form.startDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="开始日期"
                :picker-options="pickerOptionsStart"
                @change="changeStart"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                style="width:100%;"
                size="mini"
                v-model="form.endDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="结束日期"
                :picker-options="pickerOptionsEnd"
                @change="changeEnd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="5" :md="6">
            <el-form-item label="坐席" prop="agentId">
              <el-input size="small" placeholder="请输入坐席ID" v-model="form.agentId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="9" class="searchBtnMarginTop">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="QCSummaryQuery('form')"
            >查询</el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-refresh"
              @click="resetForm('form')"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row type="flex" justify="center">
        <el-col :span="8" :offset="8">
          <div class="grid-content bg-purple-dark">坐席质检信息汇总</div>
        </el-col>
      </el-row>
      <el-table :data="tableData" border highlight-current-row class="tableMarginTop">
        <el-table-column prop="UNCHECKED" align="center" label="待质检条数"></el-table-column>
        <el-table-column prop="CHECKED" align="center" label="已质检条数"></el-table-column>
        <el-table-column prop="UNRECONSIDER" align="center" label="待复议条数"></el-table-column>
        <el-table-column prop="RECONSIDER" align="center" label="已复议条数"></el-table-column>
      </el-table>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="margin-top:15px">
        <!-- <el-tab-pane label="质检信息汇总" name="first">
          <first :form='form'></first>
        </el-tab-pane> -->
        <el-tab-pane label="待质检" name="second">
          <second :form='form' v-if="isSecond" ref="childComponent"></second>
        </el-tab-pane>
        <el-tab-pane label="已质检" name="third">
          <third :form='form' v-if="isThird"></third>
        </el-tab-pane> 
        <el-tab-pane label="待复议" name="fourth">
          <fourth :form='form' v-if="isFourth"></fourth>
        </el-tab-pane>
        <el-tab-pane label="已复议" name="fifth">
          <fifth :form='form' v-if="isFifth"></fifth>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import toolBox from "@/common/utils/toolBox";
import request from "@/common/utils/requestWFM";
import selectTree from "@/components/selectTree5/";
import getGlobalParams from "@/common/utils/getGlobalParams";
import queyData from "@/message/QCManage/QCSummary/qcsummaryquery";
import requestQC from "@/common/utils/requestQC";
// import First from './component/MyQCSummary.vue';
import Second from './component/WaitQC.vue';
import Third from './component/AlreadyQC.vue';
import Fourth from './component/WaitReconsideration.vue';
import Fifth from './component/AlreadyReconsideration.vue'

export default {
  created() {
    this.form.startDate = toolBox.getCurrentMonthFirstDay();
    this.changeStart();
    this.form.endDate = toolBox.getCurrentMonthLastDay();
    this.changeEnd();
  },
  mounted() {
    this.QCSummaryQuery();
    
  },
  // updated (){
  //   this.$watch('form', () => {
  //       // this.reload();
  //     }, {
  //       deep: true
  //     })
  // },
  components: {
        // "first":First,
        "second":Second,
        "third":Third,
        "fourth":Fourth,
        "fifth":Fifth
      },
  data() {
    return {
      activeName: "second",
      isSecond:true,
      isThird:false,
      isFourth:false,
      isFifth:false,
      pickerOptionsStart: {
        disabledDate: time => {
          // return time.getTime() < Date.now()
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          // return time.getTime() < Date.now()
        }
      },
      tableData: [],
      form: {
        //表单数据
        agentId: this.$store.getters.UserNum,
        startDate: "",
        endDate: ""
      }
    };
  },
  methods: {
    handleClick(tab, event){
      if (tab.name === 'second') {
        this.isSecond = true;
        this.isThird = false;
        this.isFourth =false;
        this.isFifth = false;
      } else if (tab.name === 'third') {
        this.isSecond = false;
        this.isThird = true;
        this.isFourth =false;
        this.isFifth = false;
      }else if (tab.name === 'fourth') {
        this.isSecond = false;
        this.isThird = false;
        this.isFourth =true;
        this.isFifth = false;
      }else if (tab.name === 'fifth') {
        this.isSecond = false;
        this.isThird = false;
        this.isFourth =false;
        this.isFifth = true;
      }
    },
    async QCSummaryQuery() {
      let resBody = new queyData();
      resBody.data.BEGINDATE = this.form.startDate;
      resBody.data.ENDDATE = this.form.endDate;
      resBody.data.AGENTID = this.form.agentId;
      // console.log('总页面=='+JSON.stringify(resBody.data))
      let response = await requestQC(resBody);
      if (response.SYS_HEAD.ReturnCode == "000000") {
        console.log("table" + JSON.stringify(response.BODY));
        // this.tableData.UNCHECKED = response.BODY.UNCHECKED;
        // this.tableData.CHECKED = response.BODY.CHECKED;
        // this.tableData.UNRECONSIDER = response.BODY.UNRECONSIDER;
        // this.tableData.RECONSIDER = response.BODY.RECONSIDER;
        let arr = [];
        arr.push(response.BODY);
        this.tableData = arr;
      //   this.$watch('form', () => {
      //     let t = null;
      //     t = setTimeout(this.$refs.childComponent.QCInfoQuery(), 2000)
        
      // },{deep:true})
      let t = null;
      t = setTimeout(this.waitQcQuery(), 2000)
      } else {
        this.$message({
          type: "error",
          message:
            "请求失败，错误码:" +
            response.SYS_HEAD.ReturnCode +
            "，错误信息：" +
            response.SYS_HEAD.ReturnMessage
        });
      }
    },
    waitQcQuery(){
      this.$refs.childComponent.QCInfoQuery()
    },
    changeStart() {
      this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
        disabledDate: time => {
          if (this.form.startDate) {
            return (
              time.getTime() <
              Date.parse(
                this.form.startDate.slice(0, 4) +
                  "-" +
                  this.form.startDate.slice(4, 6) +
                  "-" +
                  this.form.startDate.slice(6, 8)
              ) -
                8.64e7
            );
          } else {
            // return time.getTime() < Date.now();
          }
        }
      });
    },
    changeEnd() {
      this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
        disabledDate: time => {
          if (this.form.endDate) {
            return (
              time.getTime() >
              Date.parse(
                this.form.endDate.slice(0, 4) +
                  "-" +
                  this.form.endDate.slice(4, 6) +
                  "-" +
                  this.form.endDate.slice(6, 8)
              )
            );
          } else {
            // return time.getTime() < Date.now();
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>